{% extends "base.html" %}

{% block content %}
<label for="autocomplete">Ingrese el nombre o la cedula del usuario:</label>
<input type="text" name="user" id="autocomplete"/>
<br/>
<img id="qrimg"/>
{% end %}

{% block scripts %}
<link rel="stylesheet" href="/static/css/autocomplete.css" type="text/css">
<script type="text/javascript">
$('#autocomplete').autocomplete({
    serviceUrl: '/users/filter',
	paramName: 'query',
    onSelect: function (suggestion){
		$.ajax({
			type: "POST",
			url: '/users/qrgen',
			data: {username: suggestion.data},
			success: function(data){
				var parsed = JSON.parse(data);
				if(parsed && parsed.success){
					document.getElementById("qrimg").src="data:image/png;base64," + parsed["data"];
				}else{
					document.getElementById("qrimg").src="data:image/png;base64,";
				}
			},
			error: function(){
				alert('Ocurrió un error al intentar generar el código QR.');
			},
			dataType: 'text'
		});
    }
});
</script>
{% end %}
